<template>
	<view class="container">
		<view class="pagetop">
			<u-navbar :background="background" title="保证金" title-color="#fff" back-icon-color="#fff" :border-bottom="false"></u-navbar>
			<view>
				<text class="title">请先缴纳保证金</text>
				<text class="price">{{price.toFixed(2)|addPricesign}}</text>
			</view>
		</view>
		<view class="pagemiddle">
			<text>1.在有订单情况下保证金不能退还</text>
			<text>2.无单子情况下可申请退还</text>
			<text>3.申请退还原路退还到您的钱包</text>
		</view>
		<view class="pagebottom">
			<u-cell-group>
				<u-cell-item title="缴纳保证金" v-on:click="navigateTopaydeposit()">
					<u-icon slot="icon" size="40" name="../../../static/icon_jn_533.png"></u-icon>
				</u-cell-item>
				<u-cell-item title="申请退还" v-on:click="applyGivebackdeposit()">
					<u-icon slot="icon" size="40" name="../../../static/icon_sq_534.png"></u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>
		<!-- 申请退还 模态框 -->
		<u-modal v-model="showGivebackModal" title="温馨提示" :show-cancel-button="true" cancel-color="rgba(135, 135, 135, 1)" confirm-color="rgba(13, 173, 99, 1)" :mask-close-able="true">
			<view class="slot-content">
				<rich-text :nodes="givebackModalcontent"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{
					backgroundColor:'transparent'
				},
				price:1000,
				showGivebackModal:false,
				givebackModalcontent:`
				      <p style="text-align:center;margin-bottom:15px">确定退还保证金？</p>
					  <p style="text-align:center;color:#878787;margin-bottom:20px;">退回保证金将退还到您的XX平台钱包</p>
				`
			}
		},
		onLoad() {
			
		},
		methods: {
			navigateTopaydeposit:function(){
				uni.navigateTo({
					url:'./paydeposit/paydeposit'
				});
			},
			applyGivebackdeposit:function(){
				this.showGivebackModal=true;
			}
		},
		filters:{
			addPricesign:function(val){
				return '￥'+val;
			}
		}
	}
</script>

<style lang="scss">
     page{
		 width: 100%;
		 height: 100%;
	 }
	 .container{
		 width: 100%;
		 height: 100%;
		 background-color: rgba(244, 248, 251, 1);
		 .pagetop{
		 	 width: 100%;
			 height: 550upx;
			 background: url('~@/static/depositback.png') no-repeat;
			 background-size: 100% 100%;
			 view{
				 width: 100%;
				 height: auto;
				 display: flex;
				 flex-wrap: wrap;
				 justify-content: center;
				 position: relative;
				 top: 100upx;
				 text{
					 display: block;
					 color:#fff;
					 width: 100%;
					 text-align: center;
				 }
				 .title{
					 font-size: 30upx;
				 }
				 .price{
					 font-size: 60upx;
					 margin-top: 100upx;
				 }
			 }
		 }
		 .pagemiddle{
			 width: 680upx;
			 margin: auto;
			 height: auto;
			 padding-top: 20upx;
			 padding-bottom: 20upx;
			 display: flex;
			 justify-content: center;
			 flex-wrap: wrap;
			 text{
				 color: rgba(136, 136, 136, 1);
				 font-size: 27upx;
				 display: block;
				 width: 100%;
			 }
		 }
		 .pagebottom{
			 background-color: #FFFFFF;
			 width: 100%;
			 height: auto;
			.u-cell{
				border-bottom: 1upx solid #F1F1F1;
			}
		 }
		 .slot-content{
			 margin-top: 30upx;
			 rich-text{
				 font-size: 28upx;
			 }
		 }
	 }
</style>
